<html><head><meta charset="utf-8"/><title>AJAX</title></head><body><h1>AJAX</h1><div class="x-wiki-content x-main-content">
 <p>
  用JavaScript写AJAX前面已经介绍过了，主要问题就是不同浏览器需要写不同代码，并且状态和错误处理写起来很麻烦。
 </p>
 <p>
  用jQuery的相关对象来处理AJAX，不但不需要考虑浏览器问题，代码也能大大简化。
 </p>
 <h3>
  ajax
 </h3>
 <p>
  jQuery在全局对象
  <code>
   jQuery
  </code>
  （也就是
  <code>
   $
  </code>
  ）绑定了
  <code>
   ajax()
  </code>
  函数，可以处理AJAX请求。
  <code>
   ajax(url, settings)
  </code>
  函数需要接收一个URL和一个可选的
  <code>
   settings
  </code>
  对象，常用的选项如下：
 </p>
 <ul>
  <li>
   <p>
    async：是否异步执行AJAX请求，默认为
    <code>
     true
    </code>
    ，千万不要指定为
    <code>
     false
    </code>
    ；
   </p>
  </li>
  <li>
   <p>
    method：发送的Method，缺省为
    <code>
     'GET'
    </code>
    ，可指定为
    <code>
     'POST'
    </code>
    、
    <code>
     'PUT'
    </code>
    等；
   </p>
  </li>
  <li>
   <p>
    contentType：发送POST请求的格式，默认值为
    <code>
     'application/x-www-form-urlencoded; charset=UTF-8'
    </code>
    ，也可以指定为
    <code>
     text/plain
    </code>
    、
    <code>
     application/json
    </code>
    ；
   </p>
  </li>
  <li>
   <p>
    data：发送的数据，可以是字符串、数组或object。如果是GET请求，data将被转换成query附加到URL上，如果是POST请求，根据contentType把data序列化成合适的格式；
   </p>
  </li>
  <li>
   <p>
    headers：发送的额外的HTTP头，必须是一个object；
   </p>
  </li>
  <li>
   <p>
    dataType：接收的数据格式，可以指定为
    <code>
     'html'
    </code>
    、
    <code>
     'xml'
    </code>
    、
    <code>
     'json'
    </code>
    、
    <code>
     'text'
    </code>
    等，缺省情况下根据响应的
    <code>
     Content-Type
    </code>
    猜测。
   </p>
  </li>
 </ul>
 <p>
  下面的例子发送一个GET请求，并返回一个JSON格式的数据：
 </p>
 <pre><code>var jqxhr = $.ajax('/api/categories', {
    dataType: 'json'
});
// 请求已经发送了
</code></pre>
 <p>
  不过，如何用回调函数处理返回的数据和出错时的响应呢？
 </p>
 <p>
  还记得Promise对象吗？jQuery的jqXHR对象类似一个Promise对象，我们可以用链式写法来处理各种回调：
 </p>
 <pre><code class="language-x-javascript">'use strict';

function ajaxLog(s) {
    var txt = $('#test-response-text');
    txt.val(txt.val() + '\n' + s);
}

$('#test-response-text').val('');
----
var jqxhr = $.ajax('/api/categories', {
    dataType: 'json'
}).done(function (data) {
    ajaxLog('成功, 收到的数据: ' + JSON.stringify(data));
}).fail(function (xhr, status) {
    ajaxLog('失败: ' + xhr.status + ', 原因: ' + status);
}).always(function () {
    ajaxLog('请求完成: 无论成功或失败都会调用');
});
</code></pre>
 <textarea id="test-response-text" rows="10" style="width: 90%; margin: 15px 0; resize: none;">响应结果：
</textarea>
 <h3>
  get
 </h3>
 <p>
  对常用的AJAX操作，jQuery提供了一些辅助方法。由于GET请求最常见，所以jQuery提供了
  <code>
   get()
  </code>
  方法，可以这么写：
 </p>
 <pre><code>var jqxhr = $.get('/path/to/resource', {
    name: 'Bob Lee',
    check: 1
});
</code></pre>
 <p>
  第二个参数如果是object，jQuery自动把它变成query string然后加到URL后面，实际的URL是：
 </p>
 <pre><code>/path/to/resource?name=Bob%20Lee&amp;check=1
</code></pre>
 <p>
  这样我们就不用关心如何用URL编码并构造一个query string了。
 </p>
 <h3>
  post
 </h3>
 <p>
  <code>
   post()
  </code>
  和
  <code>
   get()
  </code>
  类似，但是传入的第二个参数默认被序列化为
  <code>
   application/x-www-form-urlencoded
  </code>
  ：
 </p>
 <pre><code>var jqxhr = $.post('/path/to/resource', {
    name: 'Bob Lee',
    check: 1
});
</code></pre>
 <p>
  实际构造的数据
  <code>
   name=Bob%20Lee&amp;check=1
  </code>
  作为POST的body被发送。
 </p>
 <h3>
  getJSON
 </h3>
 <p>
  由于JSON用得越来越普遍，所以jQuery也提供了
  <code>
   getJSON()
  </code>
  方法来快速通过GET获取一个JSON对象：
 </p>
 <pre><code>var jqxhr = $.getJSON('/path/to/resource', {
    name: 'Bob Lee',
    check: 1
}).done(function (data) {
    // data已经被解析为JSON对象了
});
</code></pre>
 <h3>
  安全限制
 </h3>
 <p>
  jQuery的AJAX完全封装的是JavaScript的AJAX操作，所以它的安全限制和前面讲的用JavaScript写AJAX完全一样。
 </p>
 <p>
  如果需要使用JSONP，可以在
  <code>
   ajax()
  </code>
  中设置
  <code>
   jsonp: 'callback'
  </code>
  ，让jQuery实现JSONP跨域加载数据。
 </p>
 <p>
  关于跨域的设置请参考
  <a href="/wiki/1022910821149312/1023022129105888">
   浏览器
  </a>
  -
  <a href="/wiki/1022910821149312/1023022332902400">
   AJAX
  </a>
  一节中CORS的设置。
 </p>
</div>
</body></html>